<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-alert show-icon title="注意：只允许为第三级分类设置相关参数！" type="warning"></el-alert>
      <el-row>
        <el-col>
          <span>选择商品分类:</span>
          <el-cascader
            v-model="sanList"
            :options="options"
            :props="{
                      expandTrigger: 'hover',
                      value:'cat_id',
                      label:'cat_name' }"
            @change="handleChange"
            clearable
          ></el-cascader>
        </el-col>
      </el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="many">
          <el-button size="mini" type="primary" :disabled="btn">添加参数</el-button>

          <el-table :data="manyParamList" style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="stData">
                <el-tag v-for="item in stData.row.attr_vals_arr" :key="item" closable>{{item}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
              <el-button type="danger" size="mini" el-icon-delete>删除</el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-button size="mini" type="primary" :disabled="btn">添加属性</el-button>
          <el-table :data="onlyParamList" style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="stData2">
                <el-tag v-for="item2 in stData2.row.attr_vals_arr" :key="item2" closable>{{item2}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="属性名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  created () {
    this.getJiList()
  },
  data () {
    return {
      manyParamList: [],
      onlyParamList: [],
      btn: true, // 如果级联器没有选择按钮是禁用状态
      activeName: 'only', // 默认显示only页面
      options: [], // 级联器数据来源
      sanList: [], // 级联选择器 获取选中的项目 是数组形式 [101，231，165]
      sanListId: 0 // 3级分类的id
    }
  },
  methods: {
    // 获取参数列表
    async getParamList () {
      var { data: dt } = await this.$http.get(
        'categories/' + this.sanListId + '/attributes',
        {
          params: { sel: this.activeName }
        }
      )
      console.log(dt)
      if (this.activeName === 'many') {
        this.manyParamList = dt.data
        // 把我们需要的dt.data.attr_vals字符串变成数组
        // dt.data中就多了一个attr_vals.arr
        dt.data.forEach(item => {
          item.attr_vals_arr = item.attr_vals.split(' ')
        })
      }
      if (this.activeName === 'only') {
        this.onlyParamList = dt.data
        dt.data.forEach(item => {
          item.attr_vals_arr = item.attr_vals.split(' ')
        })
      }
    },
    // 标签切换的回调
    handleClick () {
      // 选了三级 级联器才调用
      if (this.sanListId !== 0) {
        this.getParamList()
      }
    },
    // 级联器选择变化的回调处理
    handleChange () {
      // console.log(this.sanList)
      // 当级联器选中以后 回调函数的数组会有三个值 判断数组的长度为3
      if (this.sanList.length === 3) {
        // 解除按钮的禁用
        this.btn = false
        // 获得3级id
        this.sanListId = this.sanList[2]
      } else {
        // 否则的话就还是禁用按钮
        this.btn = true
        // 情况级联器
        this.sanList = []
        // 清楚3级id
        this.sanListId = 0
      }
    },
    // 获取级联器列表
    async getJiList () {
      var { data: dt } = await this.$http.get('categories')
      // console.log(dt)
      // 把获得的dt.data数据赋值给options
      this.options = dt.data
    }
  }
}
</script>

<style lang="less" scoped>
.el-col {
  margin-top: 20px;
}
.el-col span {
  margin-right: 15px;
}
.el-tag {
  margin: 5px;
}
</style>
